<template>
  <div
    :style="{
      paddingBottom: tempData.paddingBottom + 'px',
      paddingLeft: tempData.paddingTwice + 'px',
      paddingRight: tempData.paddingTwice + 'px',
      paddingTop: tempData.paddingTop + 'px',
      boxSizing: 'border-box',
    }"
  >
    <a-carousel
      :autoPlay="true"
      :animation-name="tempData.type"
      show-arrow="never"
      :indicator-type="tempData.showDian ? tempData.dianType : 'never'"
      :style="{
        width: '100%',
        height: '160px',
      }"
    >
      <a-carousel-item
        v-for="(item, index) in compObj.imageList"
        :key="index"
        :style="{ width: tempData.type == 'card' ? '70%' : '100%' }"
      >
        <img
          :src="item.image"
          :style="{
            width: '100%',
            height: '100%',
            borderTopLeftRadius: tempData.radiusNumTop + 'px',
            borderTopRightRadius: tempData.radiusNumTop + 'px',
            borderBottomLeftRadius: tempData.radiusNumBottom + 'px',
            borderBottomRightRadius: tempData.radiusNumBottom + 'px',
          }"
        />
      </a-carousel-item>
    </a-carousel>
  </div>
</template>

<script setup lang="ts">
  import { watch, ref } from 'vue'

  const props = defineProps({
    // 选中的当前组件参数
    compObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const tempData: any = ref({})
  watch(
    () => props.compObj,
    (newVal, oldVal) => {
      tempData.value = JSON.parse(JSON.stringify(newVal))
    },
    { immediate: true, deep: true }
  )
</script>

<style scoped lang="less">
  :deep(.arco-carousel-indicator-wrapper-bottom) {
    background: none;
  }
</style>
